<template>
	<view class="">
		<view class="nav">
			<u-navbar title-color="#fff" back-icon-color="#ffffff" :is-back="true" :background="background"
				:back-text-style="{color: '#fff'}" title="司机认证" back-text="返回" />

		</view>
		<view class="ui-all">
			<view class="ui-list">
				<text>真实姓名：</text>
				<input type="text" :placeholder="value" :value="name" @input="realName" placeholder-class="place" />
			</view>
			<view class="ui-list">
				<text>身份证号：</text>
				<input type="text" :placeholder="value" :value="idNumber" @input="checkNumber" placeholder-class="place" />
			</view>
			<view class="ui-list">
				<text>驾照：</text>
				<image v-if="index == 0||index ==1" :src="picture"></image>
				<u-upload v-if="index !=0&&index !=1"
				:before-remove="beforeRemove" 
				ref="uUpload" 
				:custom-btn="false" 
				:show-upload-list="true" 
				:action="uploadFile.url" 
				:formData="uploadFile.formData" 
				:auto-upload="true" 
				:file-list="fileList"
				:show-progress="true" :deletable="true" :max-count="uploadFile.maxCount" @on-list-change="onListChange"
				 @on-success="OnSuccess"/>
			</view>
			<view class="ui-list">
				<text>认证状态：</text>
				<input v-model="driverState[index].name" type="text" disabled="true" placeholder-class="place" />
			</view>
			<view v-if="index == 2" class="ui-list">
				<text>原因：</text>
				<input type="text" disabled="true":value="carRearon" placeholder-class="place" />
			</view>
			<button v-if="index == 4" class="save" @tap="savaInfo()">认证</button>
			<button v-if="index == 2" class="save" @tap="resaveInfo()">重新认证</button>
			<button v-if="index == 1" class="save" @tap="deleteInfo()">删除认证</button>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		policy
	} from '../../api/uploadFile/upload.js'
	import {
		driverAttestation,updateInfo,deleteInfo
	} from '../../api/user/attestation.js'
	export default {
		data() {
			return {
				// 背景
				background: {
					backgroundColor: '#f8f8f8',

					// 导航栏背景图
					//background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',

					// 渐变色
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				driverState: [{
					id: 0,
					name: '等待审批'
				}, {
					id: 1,
					name: '审批通过'
				}, {
					id: 2,
					name: '驳回'
				}, {
					id: 3,
					name: '禁用'
				},{
					id:4,
					name:'未提交'
				}],
				value:'请填写',
				idNumber: '',
				name: '',
				index:'',
				uploadFile: {
					url: '', //后端地址
					maxCount: 1, // 最大上传数
					formData: {}, // 携带的参数
					name: '' // 上传的文件字段名
				},
				date: {},
				fileList: [],
				lists: [], // 组件内部的文件列表,
			}
		},
		computed: {
			...mapGetters([
				'carState',
				'carName',
				'carIdCard',
				'carPicture',
				'carRearon',
				'userID',
				'code',
				'carId',
			])
		},
		created() {
			if(this.carState ===''){
				this.index = 4;
			}else{
				this.index = this.carState;
			}
			this.name = this.carName;
			this.idNumber = this.carIdCard;
			this.picture = this.carPicture;
			console.log(this.index)
		},
		mounted() {
			this.getPolicy();
		},
		methods: {
			// 上传图片之前的钩子函数
			beforeUpload() {},
			// 上传成功时返回
			OnSuccess() {
				this.date.carPicture = this.uploadFile.formData.host + "/" + this.uploadFile.formData.key
			},
			getPolicy() {
				let _self = this;
				policy().then(response => {
					_self.uploadFile.url = response.host
					_self.uploadFile.formData.policy = response.policy;
					_self.uploadFile.formData.signature = response.signature;
					_self.uploadFile.formData.ossaccessKeyId = response.accessid;
					_self.uploadFile.formData.key = response.dir + response.key;
					_self.uploadFile.formData.dir = response.dir;
					_self.uploadFile.formData.host = response.host;
				})
			},
			onListChange(lists) {
				// console.log('onListChange', lists);
				this.lists = lists;
			},
			beforeRemove(index, lists) {
				return true;
			},
			realName(e) {
				this.name = e.detail.value;
			},
			checkNumber(e) {
				this.idNumber = e.detail.value;
			},
			savaInfo() {
				if (this.idNumber.length != 18) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '身份证不正确'
					});
					return false;
				}
				this.date.idNumber = this.idNumber;
				this.date.name = this.name;
				let date = this.date;
				this.date.userId = this.userID;
				driverAttestation(date).then(res => {
					console.log(JSON.stringify(res))
					if (res.header.code == 200) {
						uni.showToast({
							icon: 'success',
							title: '申请成功，等待人工审核',
							duration: 1000
						});
						this.$store.dispatch("userInfo/SETUSERINFO", date)
						uni.reLaunch({
							url: '../mine/index'
						});
					}else{
						uni.showToast({
							icon: 'none',
							title: res.body,
							duration: 1000
						});
					}
				})
			},
			resaveInfo() {
				if (this.idNumber.length != 18) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '身份证不正确'
					});
					return false;
				}
				this.date.idNumber = this.idNumber;
				this.date.name = this.name;
				this.date.code = this.code;
				this.date.userId= this.userID;
				let date = this.date;
				console.log(date);
				updateInfo(date).then(res => {
					console.log(JSON.stringify(res))
					if (res.header.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '修改成功，等待人工审核',
							duration: 2000
						});
						this.$store.dispatch("userInfo/SETUSERINFO", date)
						uni.reLaunch({
							url: '../mine/index'
						});
					}else{
						uni.showToast({
							icon: 'none',
							title: res.body,
							duration: 2000
						});
					}
				})
			},
			deleteInfo(){
				deleteInfo(this.carId).then(res =>{
					console.log(this.carId)
					if(res.header.code==200){
						uni.showToast({
							icon: 'success',
							title: '取消认证成功',
							duration: 2000
						});
						uni.reLaunch({
							url: '../mine/index'
						});
					}
				})
			},
		},
	}
</script>

<style lang="less">
	.container {
		display: block;
	}

	.ui-all {
		padding: 20rpx 40rpx;

		.avatar {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			.imgAvatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				display: inline-block;
				vertical-align: middle;
				overflow: hidden;

				.iavatar {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			text {
				display: inline-block;
				vertical-align: middle;
				color: #8e8e93;
				font-size: 28rpx;
				margin-left: 40rpx;
			}

			&:after {
				content: ' ';
				width: 20rpx;
				height: 20rpx;
				border-top: solid 1px #030303;
				border-right: solid 1px #030303;
				transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				/* IE 9 */
				-moz-transform: rotate(45deg);
				/* Firefox */
				-webkit-transform: rotate(45deg);
				/* Safari 和 Chrome */
				-o-transform: rotate(45deg);
				position: absolute;
				top: 85rpx;
				right: 0;
			}
		}

		.ui-list {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			text {
				color: #4a4a4a;
				font-size: 28rpx;
				display: inline-block;
				vertical-align: middle;
				min-width: 150rpx;
			}

			input {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
			}

			u-upload {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
			}

			button {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				background: none;
				margin: 0;
				padding: 0;

				&::after {
					display: none;
				}
			}

			picker {
				width: 90%;
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				position: absolute;
				top: 30rpx;
				left: 150rpx;
			}

			textarea {
				color: #030303;
				font-size: 30rpx;
				vertical-align: middle;
				height: 150rpx;
				width: 100%;
				margin-top: 50rpx;
			}

			.place {
				color: #999999;
				font-size: 28rpx;
			}
		}

		.right:after {
			content: ' ';
			width: 20rpx;
			height: 20rpx;
			border-top: solid 1px #030303;
			border-right: solid 1px #030303;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			/* IE 9 */
			-moz-transform: rotate(45deg);
			/* Firefox */
			-webkit-transform: rotate(45deg);
			/* Safari 和 Chrome */
			-o-transform: rotate(45deg);
			position: absolute;
			top: 40rpx;
			right: 0;
		}

		.save {
			background: #030303;
			border: none;
			color: #ffffff;
			margin-top: 40rpx;
			font-size: 28rpx;
		}
	}
</style>
